{extend name="$adminViewPath.public.iframe.layout"}

{block name="head_style"}
<style type="text/css">
    .field-box {
        padding: 15px 0;
    }

    .field-box:not(:first-child) {
        border-top: 1px dashed #c2c2c2;
    }

    .field-box .title {
        margin-bottom: 15px;
    }

    .field-box .control .yunj-input-inline {
        width: 100%;
    }
</style>
{/block}

{block name="content"}
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body ">
            <!-- 单行文本框 -->
            <div class="field-box text">
                <div class="title">单行文本框示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="text_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="你好">设置单行文本框示例值为：你好
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取单行文本框示例值</button>
                </div>
            </div>
            <!-- 富文本 -->
            <div class="field-box editor">
                <div class="title">富文本示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="editor_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="<p>你好</p>">设置富文本示例值为：&lt;p&gt;你好&lt;/p&gt;</button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取富文本示例值</button>
                </div>
            </div>
            <!-- 按钮区域 -->
            <div class="field-box btn-box">
                <button type="button" class="layui-btn layui-btn-sm btn-clear-val">清空所有字段值</button>
                <button type="button" class="layui-btn layui-btn-sm btn-reset-val">重置所有字段值</button>
                <button type="button" class="layui-btn layui-btn-sm btn-all-val">获取所有字段值</button>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    layui.use(['yunj', "jquery"], function () {
        let win = window;
        let doc = document;
        let $ = layui.jquery;

        class SingleField {

            constructor() {
                this.formId = "test_form";
                this.formFieldObj = {};
                this.init();
            }

            init() {
                let that = this;
                that.setText();
                that.setEditor();
                that.setEventBind();
            }

            // 设置单行文本框
            setText() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "text_key",
                    args: {
                        value: "初始值"
                    }
                };

                yunj.formField("text", options).then(field => {
                    // 指定父容器渲染
                    field.render(`.field-box.text .control`).then(res => {
                    });
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                });
            }

            // 设置富文本
            setEditor() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "editor_key",
                    args: {
                        value: "富文本初始值"
                    }
                };

                yunj.formField("editor", options).then(field => {
                    // 指定父容器渲染
                    field.render(`.field-box.editor .control`).then(res => {
                    });
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                });
            }

            // 事件绑定
            setEventBind() {
                let that = this;

                // 根据字段对象设置单个字段值
                $(".field-box .btn-box .btn-set-val").on("click", function () {
                    let fieldKey = $(this).parents(".btn-box").eq(0).data("fieldKey");
                    let fieldObj = that.formFieldObj.hasOwnProperty(fieldKey) ? that.formFieldObj[fieldKey] : null;
                    if (!fieldObj) {
                        alert(`字段key=[${fieldKey}]还未完成渲染`);
                        return;
                    }
                    let value = $(this).data("value");
                    fieldObj.setValue(value);
                });

                // 根据字段对象获取单个字段值
                $(".field-box .btn-box .btn-get-val").on("click", function () {
                    let fieldKey = $(this).parents(".btn-box").eq(0).data("fieldKey");
                    let fieldObj = that.formFieldObj.hasOwnProperty(fieldKey) ? that.formFieldObj[fieldKey] : null;
                    if (!fieldObj) {
                        alert(`字段key=[${fieldKey}]还未完成渲染`);
                        return;
                    }
                    alert(`字段[${fieldKey}] = ` + fieldObj.getValue());
                });

                // 根据表单id清空所有字段值
                $(".field-box.btn-box .btn-clear-val").on("click", function () {
                    yunj.formClear((that.formId));
                });

                // 根据表单id重置所有字段值
                $(".field-box.btn-box .btn-reset-val").on("click", function () {
                    yunj.formReset(that.formId);
                });

                // 根据表单id获取所有字段值
                $(".field-box.btn-box .btn-all-val").on("click", function () {
                    let formData = yunj.formData(that.formId);
                    alert(JSON.stringify(formData));
                });
            }

        }

        $(doc).ready(function () {
            new SingleField();
        });
    });
</script>
{/block}